<template>
    <div class="goodsinfo-container">
        <transition
        @before-enter="beforeenter"
        @enter="enter"
        @after-enter="afterenter"
        >
            <div class="ball" v-show="ballflag" ref="ball">

            </div>

        </transition>
        
        <!-- 商品轮播区域 -->
        <div class="mui-card">
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<swiper :lunbotuList="lunbotu"></swiper> 
					</div>
				</div>
			</div>
        <!-- 商品购买区域 -->
        <div class="mui-card">
				<div class="mui-card-header">{{ goodsinfo.mallCategoryName }}</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p class="price">
                            市场价：<del>￥250</del>&nbsp;&nbsp;销售价：<span class="now-price">￥251</span>


                        </p>
                        <p>
                            购买数量:<numbox @getcount='getselectedcount' :max="60"></numbox>

                        </p>
                        <p>
                            <mt-button type="primary" size="small">立即购买</mt-button>
                            <mt-button type="danger" size="small" @click="addtoshopcar">加入购物车</mt-button>
                            <!-- 如何实现加入购物车时候，拿到选择的数量 -->
                            <!-- 1.按钮属于goodsinfo页面，数字属于组件 numbox页面 -->
                            <!-- 2.由于涉及到了父子组件的嵌套，所以无法在goodsinfo 页面 中获取到numbox的值，必须使用到父子组件传值 -->
                            <!-- 解决问题地方法：子组件向父组件传值 -->
                            
                        </p>
					</div>
				</div>
				
			</div>
        <!-- 商品参数区域 -->
        <div class="mui-card">
				<div class="mui-card-header">商品参数</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner">
						<p>商品货号：SD293162533</p>
                        <p>库存情况：60</p>
                        <p>上架时间：{{ Date.now()| dateFormat }}</p>
					</div>
				</div>
				<div class="mui-card-footer">
                    <mt-button type="primary" size="large" plain @click="godesc(id)">图文介绍</mt-button><br />
                    <mt-button type="danger" size="large" plain @click="gocomment(id)">商品评论</mt-button>
                </div>
                
			</div>

    </div>
    
</template>
<script>
// 导入轮播图觅
import swiper from '../subcomponents/swiper.vue'
import numbox from '../subcomponents/goodsinfo_numbox.vue'
export default {
    data(){
        return{
            id:this.$route.params.goodsId ,//将浏览器栏的id 传到 data上
            lunbotu:[],
            goodsinfo:{},
            ballflag:false ,//控制小球隐藏显示的标示符
            selectedcount:1 //保存用户选中的商品数量，默认为1



        }
    },
    created(){
        this.getlunbotu(),
        this.getgoodsinfo()

    },
    methods:{
        getlunbotu(){
            this.$http.get('https://www.easy-mock.com/mock/5c05f6478da5aa5aaa8b6076/vue').then(result =>{
                console.log(result)
            if(result.status === 200){
                this.lunbotu = result.body.data.floor1

            }

            })
        },
        getgoodsinfo(){
        this.$http.get('https://www.easy-mock.com/mock/5c05f6478da5aa5aaa8b6076/vue').then(result =>{
            if(result.status === 200){
                this.goodsinfo = result.body.data.category[0]

            }
        })

    },
    godesc(id){ //跳转到图文介绍页面
        this.$router.push({ name:'goodsdesc',params:{ id }});

    },
    gocomment(id){ //跳转到评论页面
         this.$router.push({ name:'goodscomment',params:{ id }});

    },
     addtoshopcar(){//添加到购物车
     this.ballflag = !this.ballflag
     //{id：商品的id，count：要购买的数量，price：商品的价格，selected：true}
     var goodsinfo ={
         id:this.id,
         count:this.selectedcount,
         price:'4',
         selected:true
         
     };
     //调用 store 中的 mutations来将商品加入购物车
     this.$store.commit('addtocar',goodsinfo)


     },
     beforeenter(el){
         el.style.transform="translate(0,0)";


     },
     enter(el,done){
         el.offsetWidth;

         //小球动画优化思路，
          //1.先分析导致动画不准确的本质原因：我们把小球最终位置移到的位置，已经局限在某一分辨率下，滚条为滚动的情况下
        //2.只要分辨率和测试的时候不一样，或者砸门的滚动条有一定滚动距离的时候 ，问题就显示出来了
        //3.因此我们分析到不能把未知的距离写死，而是英爱根据不同情况动态计算这个值
        //4.经过分析，得出解决思路，先得到购物车的横纵坐标，再得到小球的横纵坐标，然后让横纵向求差，得到的结果就是横纵坐标位移的距离
        //5.如何获取距离 domObject，getBoundimgClientRect（）方法
        //获取小球在页面的位置
        const ballposition = this.$refs.ball.getBoundingClientRect();
        //获取购物车图标在页面的位置
        const badgeposition = document.getElementById('badge').getBoundingClientRect();
        const xDist = badgeposition.left - ballposition.left;
        
        const yDist = badgeposition.top - ballposition.top;
        
         el.style.transform=`translate(${xDist}px,${yDist}px)`;
         el.style.transition ='all 0.4s cubic-bezier(.4,-0.3,1,.68)';
         done()

     },
     afterenter(el){
         this.ballflag = !this.ballflag

     },
     getselectedcount(count){
         //当子组件把选中的数量传递给父组件的时候，把选中的值保存到data上
         this.selectedcount =count;
         //子组件传递给父组件的值
         console.log('父组件拿到的值为' + this.selectedcount)


     }



    },
   
   
    components:{
        swiper,
        numbox

    }
    
}
</script>
    
<style lang="scss" scoped>
    .goodsinfo-container{
        background-color: #eee;
        overflow: hidden;
    }
    .now-price{
        color: red;
        font-size: 16px;
        font-weight: bold;
    }
    .mui-card-footer{
        display: block;
    }
    .ball{
        width:15px;
        height: 15px;
        border-radius: 50%;
        background-color: red;
        position:absolute;
        z-index: 988;
        top:390px;
        left:140px;
        
        
    }


</style>


